<template>
  <div class="video">
    <!-- 布局 -->
    <div class="top">
      <div :class="activeTop == 0 ? 'activeStyle' : ''" @click="clickChange(0)">
        推荐
      </div>
      <div :class="activeTop == 1 ? 'activeStyle' : ''" @click="clickChange(1)">
        MV
      </div>
    </div>

    <!-- 组件库 -->

    <!-- swipe =><div> @=>v-on 绑定事件 @ 事件名 -->

    <!-- vue 操作的是虚拟dom=》 就是我们自己要操作真实dom ref  -->
    <!-- 在vue中 获取元素的真实dom 
    语法 ： 给元素添加一个ref 属性 
        2： 在vue实例中通过 this.$refs.ref(值) -->
    <van-swipe
      class="my-swipe"
      ref="swipes"
      indicator-color="white"
      @change="changes"
    >
      <van-swipe-item>
        <!-- 推荐mv组件 -->
        <div class="reVideo">
          <RecommenVideo
            v-for="item in RevideoDataList"
            :key="'0' + item.id"
            :item="item"
          ></RecommenVideo>
          <RecommenVideo
            v-for="item in RevideoDataList"
            :key="'1' + item.id"
            :item="item"
          ></RecommenVideo>
          <RecommenVideo
            v-for="item in RevideoDataList"
            :key="'2' + item.id"
            :item="item"
          ></RecommenVideo>
        </div>
      </van-swipe-item>
      <van-swipe-item>
        <!-- mv组件 -->
        <div class="reVideo">
          <RecommenVideo
            v-for="item in RevideoDataList"
            :key="'0' + item.id"
            :item="item"
          ></RecommenVideo>
          <RecommenVideo
            v-for="item in RevideoDataList"
            :key="'1' + item.id"
            :item="item"
          ></RecommenVideo>
          <RecommenVideo
            v-for="item in RevideoDataList"
            :key="'2' + item.id"
            :item="item"
          ></RecommenVideo>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import RecommenVideo from "./RecommenVideo.vue";
import { RevideoData } from "../../http/api/video.js";
export default {
  data() {
    return {
      activeTop: 0,
      RevideoDataList: [],
    };
  },
  // 注册组件
  components: {
    RecommenVideo,
  },
  //获取请求在vue中=》生命周期=》created mounted
  created() {
    this.getReVideo();
  },
  methods: {
    //头部却换
    clickChange(value) {
      this.activeTop = value;
      //点击头部却换=》轮播图却换到指定的位置=》 0 1
      this.$refs.swipes.swipeTo(value);
    },
    // 监听轮播图滚动事件
    changes(index) {
      //第一次参数就是轮播页面的位置
      console.log(index);
      this.activeTop = index; //获取到轮播位置复制给 用来动态显示 头部样式的数据
    },
    //获取推荐视频的数据
    getReVideo() {
      // 性能优化
      if (sessionStorage.getItem("RevideoDataList")) {
        this.RevideoDataList = JSON.parse(
          sessionStorage.getItem("RevideoDataList")
        );
        console.log(this.RevideoDataList);
      } else {
        //第一次没有=》发送请求
        RevideoData("/personalized/mv", {}).then((res) => {
          console.log(res);
          //获取到后台的数据
          if (res.code == 200) {
            this.RevideoDataList = res.result;
            //存放数据
            sessionStorage.setItem(
              "RevideoDataList",
              JSON.stringify(res.result)
            );
          }
        });
      }
    },
  },
};
</script>

<style scoped lang="less">
.video {
  padding: 30px 30px;
  .top {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    height: 100px;
    div {
      margin-right: 50px;
    }
    .activeStyle {
      font-weight: 600;
      border-bottom: 20px solid rgb(11, 141, 11);
    }
  }
  .my-swipe .van-swipe-item {
    overflow: auto;
    font-size: 20px;
    height: 2600px;
    text-align: center;
    // border: 2px solid red;
    &::-webkit-scrollbar {
      display: none;
    }
    .reVideo {
      display: flex;
      // 换行
      flex-wrap: wrap;
      justify-content: space-between;
    }
  }
}
</style>